<%--
  Created by IntelliJ IDEA.
  User: 15813315065
  Date: 2020/6/12
  Time: 9:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单展示页面</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/font-awesome.css" />
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">
    <script src="js/vue.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/notifications/Lobibox.js"></script>
    <%--    <script src="js/jquery.cookie.min.js"></script>--%>
    <%--    <script src="js/loginStatus.js"></script>--%>
    <style>
        .navbar-text a  {
            color: #ffffff;
        }
        .login-text {
            margin-right: 50px;
        }
        .table tr:first-child {
            background-color: #e2e2e2;
            font-weight: 600;
        }
        .tab-content {
            padding-top: 24px;
        }
        #btn {
            color: red;
            border: 1px solid grey;
            font-size: 15px;
            border-radius: 5px;
            float: right;
        }
        #btn1 {
            color: red;
            border: 1px solid grey;
            font-size: 15px;
            border-radius: 5px;
        }
        #btn2 {
            color: red;
            border: 1px solid grey;
            font-size: 15px;
            border-radius: 5px;
            float: left;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="index.jsp" class="navbar-brand" style="color: #ffffff;"><i class="fa fa-sign-language"></i> 寻欢易购</a>
        </div>
    </div>
</nav>
<div class="container">
    <div class="row">
        <div class="col-xs-8 col-xs-push-2">
            <ul class="nav nav-tabs" id="orderTabs">
                <li class="active"><a id="0" href="#unpayOrders">未支付订单</a></li>
                <li><a id="1" href="#payedOrders">已支付订单</a></li>
                <li><a id="2" href="#expiredOrders">已取消订单</a></li>
            </ul>
            <div class="tab-content" id="app">
                <div id="unpayOrders" class="tab-pane active">
                    <table class="table" v-for="order in unpayedOrders">
                        <tr>
                            <td colspan="3">订单日期: {{order.createTime}} &nbsp;&nbsp;&nbsp;&nbsp&nbsp&nbsp&nbsp;&nbsp&nbsp&nbsp&nbsp;&nbsp;&nbsp;&nbsp;订单编号: <span :ono="order.orderNo" id="span">{{order.orderNo}}</span> </td>
                        </tr>
                        <!--                            <tr v-for="g in goods">-->
                        <tr v-for="o in order.orders">
                            <td style="max-width: 200px;">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="javascript: void(0);">
                                            <img class="media-object" height="80px" width="62px" :src="o.ogoodImg">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 id="h4" class="media-heading">{{o.ogoodTitle}}</h4>
                                    </div>
                                </div>
                            </td>
                            <td>￥<span id="getPrice">{{o.ogoodPrice}}</span></td>
                            <td>{{o.onum}}</td>
                        </tr>
                        <tr>
                            <td><a id="a2" onclick="cancel(this)" :ono="order.orderNo"><button id="btn2" type="button">取消订单</button></a></td>
                            <td colspan="2"><a  onclick="jump(this)" :oimg="order.orders.oGoodImg" :ono="order.orderNo"><button id="btn" type="button">去支付</button></a></td>
<%--                            <td colspan="2"><a  onclick="confirmPay1(this)" :oimg="order.orders.oGoodImg" :ono="order.orderNo"><button id="btn1" type="button">微信支付</button></a></td>--%>
                        </tr>
                    </table>
                </div>
                <div id="payedOrders" class="tab-pane">
                    <table class="table" v-for="order in payedOrders">
                        <tr>
                            <td colspan="3">订单日期: {{order.createTime}} &nbsp;&nbsp;&nbsp;&nbsp&nbsp&nbsp&nbsp;&nbsp&nbsp&nbsp&nbsp;&nbsp;&nbsp;订单编号: {{order.orderNo}}</td>
                        </tr>
                        <!--                            <tr v-for="g in goods">-->
                        <tr v-for="o in order.orders">
                            <td style="max-width: 200px;">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="javascript: void(0);">
                                            <img class="media-object" height="80px" width="62px" :src="o.ogoodImg">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">{{o.ogoodTitle}}</h4>
                                    </div>
                                </div>
                            </td>
                            <td>￥{{o.ogoodPrice}}</td>
                            <td>{{o.onum}}</td>
                        </tr>
                    </table>
                </div>
                <div id="expiredOrders" class="tab-pane">
                    <table class="table" v-for="order in expiredOrders">
                        <tr>
                            <td colspan="3">订单日期: {{order.createTime}} &nbsp;&nbsp;&nbsp;&nbsp&nbsp&nbsp&nbsp;&nbsp&nbsp&nbsp&nbsp;&nbsp;&nbsp;订单编号: {{order.orderNo}}</td>
                        </tr>
                        <!--                            <tr v-for="g in goods">-->
                        <tr v-for="o in order.orders">
                            <td style="max-width: 200px;">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="javascript: void(0);">
                                            <img class="media-object" height="80px" width="62px" :src="o.ogoodImg">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">{{o.ogoodTitle}}</h4>
                                    </div>
                                </div>
                            </td>
                            <td>￥{{o.ogoodPrice}}</td>
                            <td>{{o.onum}}</td>
                        </tr>
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>


<div class="modal" id="payModal" data-backdrop="static">
    <div class="modal-dialog" style="margin-top: 120px;">
        <div class="modal-content">
            <div class="modal-header">
                <button onclick="destoryPayModal()" class="close">
                    <span>&times;</span>
                </button>
                <h3 class="modal-title">支付信息</h3>
            </div>
            <div class="modal-body">
                <input type="hidden" id="orderNo">
                <h4 style="font-weight: 800;"><span>应付金额: </span>￥<span style="color: red;" id="totalPrice"></span></h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" onclick="cancelPayModal()">取消支付</button>
                <button type="button" onclick="confirmPay(this)" class="btn btn-info">支付宝支付</button>
                <button type="button" onclick="confirmPay1(this)" class="btn btn-success">微信支付</button>
            </div>
        </div>
    </div>
</div>

</body>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            unpayedOrders:[], //未支付订单
            payedOrders: [], //已支付订单
            expiredOrders: [], //已支付订单
            payAginOrders:[],//继续支付
            totalPrice: 0
        }
    });

    function getOrders(status) {
        $.ajax({
            url: 'getOrderByStatus',
            type: 'POST',
            dataType: 'json',
            data: {
                status: status,
                uid:sessionStorage.getItem("userId")
            },
            success: function(_data) {
                console.log(_data);
                if ('1' == status) {  //表示已支付订单

                    vm.payedOrders = [];
                    for(var i = 0;i < _data.length; i++) {
                        vm.payedOrders.push(_data[i]);
                    }
                }else if ('2' == status) {
                    vm.expiredOrders = [];
                    for(var i = 0;i < _data.length; i++) {
                        vm.expiredOrders.push(_data[i]);
                    }
                }
                else if ('0' == status) { //未支付订单
                    vm.unpayedOrders = [];
                    for(var i = 0;i < _data.length; i++) {
                        // console.log(_data[i].ogoodTitle)
                        vm.unpayedOrders.push(_data[i]);
                    }
                }
            }
        })
    }

    getOrders(0);  //默认获取未支付订单

    // 当用户点击的时候触发
    $('#orderTabs a').click(function() {
        var active = $(this).parent('.active'); //当前标签包含了 active 这个class的父标签
        if($(this).parent('.active').length == 0) { //如果找到的话，就表示当前标签处于未激活状态
            var status = $(this).prop('id');  //取到当前的tab的id, 与订单的状态是一致的
            console.log("active:"+active)
            getOrders(status);
            $(this).tab('show');   // 让对应的tab展示
        }
    })



    //未支付订单继续支付
    function jump(arg) {

        console.log("=========")
        // var oNo = document.getElementById("a").getAttribute("ono"); // 获得
        var oNo = $(arg).attr("ono");
        console.log(oNo)

        $.ajax({
            url: 'payByoNo',
            type: 'POST',
            dataType: 'json',
            data: {oNo: oNo},
            success: function (data) {
                var totalPrice = 0;
                vm.payAginOrders = [];
                for (var i = 0; i < data.length; i++) {
                    vm.payAginOrders.push(data[i]);
                    totalPrice = totalPrice + (data[i].ogoodPrice * data[i].onum);
                }
                console.log("totalPrice:" + totalPrice)
                vm.totalPrice = totalPrice;
                $('#totalPrice').html(totalPrice);
                $('#orderNo').val(oNo);
                $('#payModal').modal('show');
            }
        })

    }


    //确认支付时跳转支付宝支付页面
    function confirmPay(arg) {
        var oNo = $('#orderNo').val(); //获取订单编号
        var totalPrice = $('#totalPrice').html();
        console.log("oNo="+oNo+"totalPrice="+totalPrice)
        var params={
            "no":oNo,//订单编号
            "amount":totalPrice,
            "subject":"pay",
            "body":"pay"
        };
        $.ajax({
            url:"aliPay",
            type:"post",
            dataType:"json",
            data:params,
            success:function (data) {
                console.log("hello")
                $(arg).parents("table").hide();
                document.write(data)
                // $(arg).parents("table").hide();
            }
        })
    }



    //确认支付时跳转微信支付页面
    function confirmPay1(obj) {
        // var oNo = $('#orderNo').val(); //获取订单编号
        var oNo = $('#orderNo').val(); //获取订单编号
        var price = $('#totalPrice').html();
        console.log("oNo======"+oNo)
        window.location.href = "wxPay?oNo="+oNo+"&price="+price;

    }

    //确认支付时跳转微信支付页面
    // function confirmPay1(obj) {
    //     // var oNo = $('#orderNo').val(); //获取订单编号
    //     var oNo = $(obj).attr("ono");
    //     console.log(oNo)
    //     var price = $('#getPrice').html();
    //     window.location.href = "wxPay?oNo="+oNo;
    //
    // }



    // 取消支付
    function cancelPayModal() {
        $('#payModal').modal('hide');
        // location.href = 'showOrder.jsp'
        showErrorBox("支付失败")
    }

    // 关闭支付模态框
    function destoryPayModal() {
        $('#payModal').modal('hide');
        showErrorBox("支付失败")
        // location.href = 'showOrder.jsp'
    }


    //取消未支付订单
    function cancel(arg) {
        var oNo = document.getElementById("a2").getAttribute("ono"); // 获得
        var table = $(arg).parents("table");
        console.log("table"+table.text())
        console.log("取消订单的编号"+oNo);
        $.ajax({
            url:"cancelOrderByoNo",
            type:"POST",
            dataType:"json",
            data:{oNo:oNo},
            success:function (data) {
                console.log(data.msg);
                console.log(data.code);
                if (data.code==1){
                    console.log("hello")
                    $(arg).parents("table").hide();
                }
            }
        })
    }

    // 显示错误提示信息
    function showErrorBox(msgText) {
        Lobibox.notify('warning', {
            size: 'mini',
            delay: 2000,
            delayIndicator: false,
            title: false, //不给title
            msg: msgText,
            sound: false  // 不要音频
        })
    }

</script>
</html>

